<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<form action="index.html" method="post">
			姓名： <input type="text" name="name" placeholder="请输入用户名"/><br /> 密码：
			<input type="text" name="pass" placeholder="请输入密码"/><br />密码：
			<input type="text" name="que" placeholder="请再次输入密码"/><br /> 电话：
			<input type="text" name="phone" placeholder="请输入手机号码"/><br />
			<input type="submit" value="提交" />
		</form>
		<script type="text/javascript">
			$(function() {
				var err = $("<span style='color: red;'></span>")
				var suc = $("<span style='color: green;'></span>")
				var flag=true
				//用户名不能为空
				$("[name='name']").blur(function() {
					var name = $(this).val()
					var names=name.split("")
					function notShu(){
						for(var i in names){
							if(isNaN(names[i])==false){
								flag= false;
								return flag;
							}else{
								flag =true;
							}
						}
						return flag
					}
					if(name == "") {
						err.html(" 用户名不能为空")
						$(this).after(err)
						$(this).css("border","1px solid red")
					}else if(notShu()==false){
						err.html("姓名不能包含数字")
						$(this).after(err)
					}
					else {
						suc.html(" 用户名验证通过")
						$(this).after(suc)
					}
				})
				//姓名聚焦时清空
				$("[name='name']").focus(function() {
					$(this).next().html("")
				})
				//密码
				$("[name='pass']").blur(function(){
					var pass=$(this).val()
					if(pass==""){
						err.html(" 密码不能为空")
						$(this).after(err)
						$(this).css("border","1px solid red")
					}else if(pass.length<6){
						err.html(" 密码不能小于6位数")
						$(this).after(err)
						$(this).css("border","1px solid red")
					}else{
						$(this).next().html("")
						suc.html(" 密码验证通过")
						$(this).after(suc)
					}
				})
				//确认密码
				$("[name='que']").blur(function(){
					var pass=$("[name='pass']").val()
					var que=$("[name='que']").val()
					if(que!=pass){
						err.html(" 两次密码不一致")
						$(this).after(err)
						$(this).css("border","1px solid red")
					}else if(pass.length<6){
						err.html(" 密码不能小于6位数")
						$(this).after(err)
						$(this).css("border","1px solid red")
					} else{
						err.html("")
						suc.html("验证通过")
						$(this).after(suc)
					}
				})
			})
		</script>
	</body>

</html>